<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx 配置</title>
    <link rel="stylesheet" href="{{ stylesUri }}">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src {{ cspSource }} https:; script-src {{ cspSource }} https://unpkg.com; style-src {{ cspSource }} 'unsafe-inline'; font-src {{ cspSource }};">
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>Nginx 配置可视化</h1>
            <div class="actions">
                <button @click="saveConfig" class="primary">保存配置</button>
                <button @click="showTemplates = !showTemplates">选择模板</button>
            </div>
        </div>

        <!-- 模板选择面板 -->
        <div v-if="showTemplates" class="templates-panel">
            <h2>配置模板</h2>
            <p>选择一个预设模板快速配置：</p>
            <div class="templates-list">
                <div v-for="template in templates" :key="template.id" class="template-item" @click="applyTemplate(template.id)">
                    <div class="template-name">{{ template.name }}</div>
                    <div class="template-desc">{{ template.description }}</div>
                </div>
            </div>
        </div>

        <!-- 服务器配置 -->
        <div class="section">
            <h2>Server 配置</h2>
            <div class="form-group">
                <label>监听端口</label>
                <input type="number" v-model.number="config.server.listen" min="1" max="65535" />
            </div>
            <div class="form-group">
                <label>服务器名称</label>
                <input type="text" v-model="config.server.server_name" placeholder="localhost" />
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" v-model="config.server.enable_https" />
                    启用 HTTPS
                </label>
            </div>
        </div>

        <!-- Location 配置 -->
        <div class="section">
            <h2>Location 配置</h2>
            <div v-for="(location, index) in config.locations" :key="index" class="location-item">
                <div class="location-header">
                    <h3>位置 #{{ index + 1 }}</h3>
                    <button @click="removeLocation(index)" class="danger small">删除</button>
                </div>
                
                <div class="form-group">
                    <label>路径匹配</label>
                    <input type="text" v-model="location.path" placeholder="/" />
                </div>
                
                <div class="form-group">
                    <label>类型</label>
                    <select v-model="location.type">
                        <option value="proxy">反向代理</option>
                        <option value="static">静态文件</option>
                        <option value="redirect">重定向</option>
                    </select>
                </div>
                
                <!-- 反向代理配置 -->
                <div v-if="location.type === 'proxy'" class="form-group">
                    <label>代理目标</label>
                    <input type="text" v-model="location.proxy_pass" placeholder="http://localhost:3000" />
                </div>
                
                <!-- 静态文件配置 -->
                <div v-if="location.type === 'static'">
                    <div class="form-group">
                        <label>根目录</label>
                        <input type="text" v-model="location.root" placeholder="/usr/share/nginx/html" />
                    </div>
                    <div class="form-group">
                        <label>默认文件</label>
                        <input type="text" v-model="location.index" placeholder="index.html index.htm" />
                    </div>
                </div>
                
                <!-- 重定向配置 -->
                <div v-if="location.type === 'redirect'" class="form-group">
                    <label>重定向目标</label>
                    <input type="text" v-model="location.return" placeholder="301 https://example.com$request_uri" />
                </div>
            </div>
            
            <button @click="addLocation" class="secondary">添加位置</button>
        </div>

        <!-- 高级选项 -->
        <div class="section">
            <h2>高级选项</h2>
            <div class="form-group">
                <label>
                    <input type="checkbox" v-model="config.advanced.enable_gzip" />
                    启用 Gzip 压缩
                </label>
            </div>
            <div class="form-group">
                <label>客户端最大请求体积</label>
                <select v-model="config.advanced.client_max_body_size">
                    <option value="1m">1 MB</option>
                    <option value="10m">10 MB</option>
                    <option value="100m">100 MB</option>
                    <option value="1000m">1 GB</option>
                </select>
            </div>
        </div>
    </div>

    <script src="{{ scriptUri }}"></script>
</body>
</html> 